<template>
  <div>
    <!--     搜索条件-->
    <SearchForm @search="getTableData" :isSearchDisabled="isSearchDisabled" @reset="clearSearch">
      <el-col :span="8" :xs="24" v-show="$permiss[1140]">
        <el-form-item :label="$t('所属租户')" prop="adminUserId">
          <el-select style="width: 100%" v-model="page.adminUserId" clearable>
            <el-option v-for="item in tenantList" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('用户姓名')">
          <el-input v-model="page.userName" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('手机号码')">
          <el-input v-model="page.phone" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('订单编号')">
          <el-input v-model="page.orderId" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('银行账号')">
          <el-input v-model="page.accNo" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('创建时间')">
          <el-date-picker
              v-model="page.creatTimeValue"
              style="width: 100%"
              unlink-panels
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="~"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </SearchForm>
    <el-card shadow="never" style="margin-top: 10px">
      <div style="margin-bottom: 10px;text-align: right" v-show="$permiss[1215]">
        <el-button type="primary" @click="exportsExcel" :loading="exportsLoading">{{ $t('导出') }}</el-button>
      </div>
      <Table :table-column="tableColumn" :table-data="tableData" :loading="tableLoading" :page="page"
             @handleCurrentChange="handleCurrentChange"
             @handleSizeChange="handleSizeChange"/>
    </el-card>
  </div>
</template>

<script>
import {export_json_to_excel} from "@/utils/exportExcel";
import {dateFormatSection} from "@/utils/tools";
import {fetchVirtualList, virtualListExport} from '@/api/pay'
import {selectTenant} from "@/api/system";

export default {
  name: "virtualCardList",
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      tenantList: [],
      tableColumn: [
        {label: this.$t('订单编号'), fixed: "left", align: "center", prop: 'orderId', minWidth: 150},
        {label: this.$t('银行账号'), prop: 'accNo', minWidth: 150},
        {label: this.$t('银行卡账户名称'), prop: 'accName', minWidth: 150},
        {label: this.$t('银行名称'), prop: 'bankName', minWidth: 150},
        {label: this.$t('支行名称'), prop: 'bankBranch', minWidth: 150},
        {label: this.$t('创建时间'), prop: 'creationTime', minWidth: 150},
        {label: this.$t('操作人'), prop: 'inputName', width: 100},
        {label: this.$t('用户姓名'), prop: 'userName', minWidth: 100},
        {label: this.$t('手机号码'), prop: 'phone', minWidth: 100},
        {label: this.$t('APP名称'), prop: 'appName', minWidth: 100},
      ],
      tableData: [],
      isSearchDisabled: false,
      tableLoading: false,
      exportsLoading: false
    }
  },
  mounted() {
    this.getTableData()
    this.getSelect()
  },
  methods: {
    async getTableData() {
      this.isSearchDisabled = true
      this.tableLoading = true
      const [createStartTime, createEndTime] = dateFormatSection(this.page.creatTimeValue || [])
      const res = await fetchVirtualList({...this.page, createStartTime, createEndTime, creatTimeValue: null})
      if (res.code === 1) {
        const {list, total} = res.data
        this.tableData = list
        this.page.total = total
        this.isSearchDisabled = false
        this.tableLoading = false
      } else {
        this.isSearchDisabled = false
        this.tableLoading = false
      }
    },
    clearSearch() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getTableData()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getTableData()
    },
    async getSelect() {
      selectTenant().then(res => {
        this.tenantList = res.data
      })
    },
    async exportsExcel() {
      this.exportsLoading = true;
      const [createStartTime, createEndTime] = dateFormatSection(this.page.creatTimeValue || [])
      const res = await virtualListExport({...this.page, createStartTime, createEndTime, creatTimeValue: null});
      if (res.code === 1) {
        const headerData = [...this.tableColumn].filter(item => {
          const result = res.data.some(i => {
            //过滤没有权限的字段
            return typeof i[item.prop] !== "undefined"
          })
          return result
        })
        const column = headerData.map(item => item.label)
        const filterVal = headerData.map(item => item.prop)
        const list = [...res.data].map((v) => filterVal.map((j) => v[j]));
        const fileName = this.$t("虚拟卡列表");
        export_json_to_excel({
          header: column,
          data: list,
          filename: fileName,
        });
        this.exportsLoading = false;
      } else {
        this.exportsLoading = false;
      }
    }
  }
}
</script>

<style scoped>

</style>
